<template>
  <header class="app-header">
    <div class="header-container">
      <div class="logo-container">
        <router-link to="/" class="logo">
          <img src="../../assets/logo.svg" alt="柯基工具箱" />
          <h1>柯基工具箱</h1>
        </router-link>
      </div>
      
      <div class="nav-container">
        <el-menu 
          mode="horizontal" 
          :router="true"
          :ellipsis="false"
          :default-active="activeIndex"
          class="main-menu"
        >
          <el-menu-item index="/">首页</el-menu-item>
          <el-sub-menu index="tools" class="tools-submenu">
            <template #title>
              <span class="tools-title">
                <el-icon><Tools /></el-icon>
                工具箱
              </span>
            </template>
            <div class="submenu-container">
              <div class="submenu-section">
                <div class="section-title">常用工具</div>
                <el-menu-item index="/text-tools">
                  <el-icon><Document /></el-icon>
                  文本工具
                </el-menu-item>
                <el-menu-item index="/image-tools">
                  <el-icon><Picture /></el-icon>
                  图像工具
                </el-menu-item>
                <el-menu-item index="/converters">
                  <el-icon><RefreshRight /></el-icon>
                  格式转换
                </el-menu-item>
              </div>
              <div class="submenu-section">
                <div class="section-title">专业工具</div>
                <el-menu-item index="/efficiency-tools">
                  <el-icon><Timer /></el-icon>
                  效率工具
                </el-menu-item>
                <el-menu-item index="/data-tools">
                  <el-icon><DataAnalysis /></el-icon>
                  数据工具
                </el-menu-item>
                <el-menu-item index="/design-tools">
                  <el-icon><Brush /></el-icon>
                  设计工具
                </el-menu-item>
              </div>
            </div>
          </el-sub-menu>
          <el-menu-item index="/membership">会员</el-menu-item>
          <el-menu-item index="/about">关于</el-menu-item>
        </el-menu>
      </div>
      
      <div class="action-container">
        <div class="search-box">
          <el-input
            v-model="searchQuery"
            placeholder="搜索工具..."
            prefix-icon="Search"
            clearable
            @keyup.enter="handleSearch"
          />
        </div>
        
        <!-- 用户面板组件 -->
        <UserPanel />
      </div>
    </div>
  </header>
</template>

<script setup>
/**
 * 应用头部组件
 * 包含网站标志、导航菜单、搜索框和用户面板
 */
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { 
  Search, 
  Tools, 
  Document, 
  Picture, 
  RefreshRight, 
  Timer, 
  DataAnalysis, 
  Brush 
} from '@element-plus/icons-vue';
import UserPanel from './UserPanel.vue';

const route = useRoute();
const searchQuery = ref('');

// 计算当前活动路径
const activeIndex = computed(() => {
  return route.path;
});

// 处理搜索
const handleSearch = () => {
  if (!searchQuery.value.trim()) return;
  
  // 实现搜索功能
  console.log('搜索:', searchQuery.value);
  
  // 这里可以添加搜索逻辑，如跳转到搜索结果页或显示弹窗
  searchQuery.value = '';
};
</script>

<style scoped>
.app-header {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 60px;
}

.logo-container {
  min-width: 180px;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.logo img {
  height: 32px;
  margin-right: 10px;
}

.logo h1 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.nav-container {
  flex: 1;
  display: flex;
  justify-content: center;
}

.action-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

.search-box {
  width: 200px;
}

/* 工具箱下拉菜单样式 */
.main-menu {
  --el-menu-hover-bg-color: rgba(var(--primary-color-rgb), 0.1);
  --el-menu-active-color: var(--primary-color);
  border-bottom: none !important;
}

:deep(.el-menu--horizontal .el-menu-item) {
  font-size: 15px;
  font-weight: 500;
  height: 60px;
  line-height: 60px;
}

.tools-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 15px;
}

:deep(.tools-submenu .el-sub-menu__title) {
  height: 60px;
  line-height: 60px;
  transition: all 0.3s ease;
}

:deep(.tools-submenu .el-sub-menu__title:hover) {
  background-color: rgba(var(--primary-color-rgb), 0.1);
}

/* 下拉菜单容器 */
:deep(.el-menu--popup) {
  min-width: 520px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
  animation: dropDown 0.25s ease-out;
  overflow: hidden;
  border: none !important;
}

@keyframes dropDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.submenu-container {
  display: flex;
  width: 100%;
  padding: 15px 0;
  background: #fff;
}

.submenu-section {
  flex: 1;
  padding: 0 15px;
}

.submenu-section:first-child {
  border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.section-title {
  color: #888;
  font-size: 13px;
  padding: 8px 20px;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

:deep(.el-menu--horizontal .el-menu .el-menu-item) {
  display: flex;
  align-items: center;
  height: 42px;
  line-height: 42px;
  padding: 0 20px;
  font-size: 14px;
  margin: 4px 0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-menu--horizontal .el-menu .el-menu-item:hover) {
  background-color: rgba(var(--primary-color-rgb), 0.08);
  padding-left: 26px;
}

:deep(.el-menu--horizontal .el-menu .el-menu-item.is-active) {
  color: var(--primary-color);
  background-color: rgba(var(--primary-color-rgb), 0.1);
  font-weight: 600;
}

:deep(.el-menu--horizontal .el-menu .el-menu-item .el-icon) {
  margin-right: 10px;
  font-size: 18px;
  color: #555;
}

:deep(.el-menu--horizontal .el-menu .el-menu-item.is-active .el-icon) {
  color: var(--primary-color);
}

@media (max-width: 768px) {
  .logo h1 {
    display: none;
  }
  
  .search-box {
    width: 150px;
  }
  
  :deep(.el-menu--popup) {
    min-width: 300px !important;
  }
  
  .submenu-container {
    flex-direction: column;
  }
  
  .submenu-section:first-child {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 10px;
  }
}

@media (max-width: 576px) {
  .search-box {
    display: none;
  }
  
  .header-container {
    padding: 0 10px;
  }
  
  .nav-container {
    justify-content: flex-start;
  }
}
</style> 